import React from 'react';
import { Menu, Layout, Button, Space } from 'antd';
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { AppstoreOutlined, AppstoreAddOutlined, ShoppingOutlined, LogoutOutlined, MobileOutlined } from '@ant-design/icons';
import { message } from 'antd';

const { Content, Header } = Layout;

const Home = () => {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 处理登出
  const handleLogout = () => {
    localStorage.removeItem('token');
    message.success('已退出登录');
    navigate('/login');
  };
  
  // 根据当前路径确定选中的菜单项
  const getSelectedKey = () => {
    const pathname = location.pathname;
    if (pathname.includes('/device')) {
      return 'device';
    } else if (pathname.includes('/plugin')) {
      return 'plugin';
    } else if (pathname.includes('/market')) {
      return 'market';
    }
    return 'device'; // 默认选中手机列表
  };

  const items = [
    {
      key: 'device',
      icon: <MobileOutlined />,
      label: <Link to="/device/list">我的手机</Link>,
    },
    {
      key: 'plugin',
      icon: <AppstoreAddOutlined />,
      label: <Link to="/plugin/list">我的插件</Link>,
    },
    {
      key: 'market',
      icon: <ShoppingOutlined />,
      label: <Link to="/market">插件市场</Link>,
    }
  ];

  return (
    <Layout style={{ background: '#fff' }}>
      <Header style={{ 
        background: '#fff', 
        padding: '0', 
        display: 'flex', 
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <Menu
          mode="horizontal"
          selectedKeys={[getSelectedKey()]}
          items={items}
          style={{ flex: 1 }}
        />
        <Button 
          icon={<LogoutOutlined />} 
          onClick={handleLogout}
          style={{ marginRight: 16 }}
        >
          退出登录
        </Button>
      </Header>
      <Content style={{ padding: '16px 0' }}>
        <Outlet />
      </Content>
    </Layout>
  );
};

export default Home; 

